<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;

            /* height: 400px; */
            background-color: #ff0;

            /* 子元素在每一行的对齐方式 */
            align-items: flex-start;   

            /* stretch 延伸   默认值   高度会“继承”---所有子元素的高度加起来等于父元素 */
            /* align-items: stretch; */

            /* 所有子元素作为整体  针对多行的    还可以两端对齐 */
            /* align-content：flex-start / flex-end / center / space-around / space-between / space-evenly / stretch */
            /* align-content: space-evenly; */


            /* 
                交叉轴的对齐方式
                align-items   大多数时候，会在没有换行的时候使用这个属性
                align-content  大多数时候，会在有换行的时候使用使用这个属性
            */
        }

        .a {
            width: 25%;
            border: 1px solid #000;
            box-sizing: border-box;
        }
    </style>
</head>

<body>

    <!-- 

        弹性布局中，主轴横向的时候，高度默认会继承 ---  所有子元素的高度加起来和父元素高度相等

     -->

    <div class="box">
        <div class="a">1</div>
        <div class="a">1</div>
        <div class="a">1</div>
        <div class="a">1</div>
        <div class="a">1</div>
        <div class="a">1</div>

    </div>

</body>

</html>